<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>计数器案例</title>
</head>

<body>
  <div id="root">
    <h2>当前计数：{{Num}}</h2>
    <button v-on:click="add">+</button>
    <!-- 语法糖：简写alias，甜头的写法就是简写。 -->
    <button @click="Num--">-</button>
    <button @click="chen">*2</button>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    // const number = 50;//全局number
    // 响应式里面是做了一层代理，即this可以代替Vue实例
    const app = new Vue({
      el: '#root',
      data: {
        Num: 0
      },
      // methods属性用于在Vue对象中定义方法
      methods: {
        add() {
          // number++;//去全局找number
          app.Num++;
        },
        chen: function () {
          // 为什么是this，因为响应式里面有proxy代理
          this.Num *= 2;
          console.log('chen被执行了...');
        }
      }
    })
  </script>
</body>

</html>